<template>
  <el-card shadow="never">
    <template #header>
      <div class="flex flex-row items-center justify-between">
        <CardTitle title="业务统计" />
        <!-- 查询条件 -->
        <!-- 查询条件 -->
        <ShortcutDateRangePicker @change="handleTimeRangeChange" />
      </div>
    </template>
    <!-- 折线图 -->
    <!--    <Echart :height="300" :options="eChartOptions" />-->

    <el-row :gutter="4" class="mt-3px" justify="space-between">
      <el-col :span="16" class="pr-5px">
        <div class="el-card dawn-radius bg-white" v-loading="bizShow">
          <el-skeleton :loading="bizShow" animated>
            <Echart :options="bizData" style="height:300px"/>
          </el-skeleton>
        </div>
      </el-col>
      <el-col :span="8" class="pr-5px">
        <div class="el-card dawn-radius bg-white" v-loading="bizPieShow">
          <div class="flex items-center ml-1! mt-1!">
            <div v-for="(item,index) in payType" :key="index" >
              <div class="flex items-center mr-1!" >
                <el-tag>{{item.name}} <span> {{item.value}} 笔</span></el-tag>
              </div>
              <el-divider class="mb-1! mt-1!" />
            </div>

          </div>

          <el-skeleton :loading="bizPieShow" animated>
            <Echart :options="bizPieData" style="height: 262px"/>
          </el-skeleton>
        </div>
      </el-col>
    </el-row>
  </el-card>
</template>
<script lang="ts" setup>
import dayjs, { Dayjs } from 'dayjs'
import { EChartsOption } from 'echarts'
import * as TradeStatisticsApi from '@/api/mall/statistics/trade'
import * as StaticsApi from '@/api/hosp/statics'
import { fenToYuan } from '@/utils'
import { formatDate } from '@/utils/formatTime'
import { CardTitle } from '@/components/Card'
import * as MemberStatisticsApi from "@/api/mall/statistics/member";
import {bizCount, getPayCount, getPayTypeCount} from "@/api/hosp/statics";
import {bar_biz, pie_biz} from '../echarts-data.ts'
import {set} from "lodash-es";

/** 业务量趋势 */
defineOptions({ name: 'TradeTrendCard' })

const { t } = useI18n() // 国际化

/** 查询数据列表 */
const handleTimeRangeChange = async (times: [dayjs.ConfigType, dayjs.ConfigType]) => {
  loading.value = true
  // 发送时间范围选中事件
  await getOrderCountTrendComparison(times[0], times[1])
  loading.value = false
}

enum TimeRangeTypeEnum {
  WEEK = 7,
  DAY30 = 1,
  MONTH = 30,
  YEAR = 365
} // 日期类型
const loading = ref(true) // 加载中

const bizShow = ref(true)
const bizData = reactive<EChartsOption>(bar_biz) as EChartsOption
/** 查询订单数量趋势对照数据 */
const getOrderCountTrendComparison = async (
  beginTime: dayjs.ConfigType,
  endTime: dayjs.ConfigType
) => {
  bizShow.value = true
  loading.value = true

  // 查询数据
  const result = await StaticsApi.bizCount({ type:"1", beginTime: formatDate(beginTime), endTime: formatDate(endTime) })
  console.table(result)
  const register = result.register || [];
  const bill = result.bill || [];
  const inHospital = result.inHospital || [];
  // set(bizData, 'title.text','业务统计')

  const bizAllData = [];

  let num = 0;
  register.forEach(function (v, i) {
    num += v.count;
  })
  bizAllData.push({"type":"挂号","count":num});
  num = 0;
  bill.forEach(function (v, i) {
    num += v.count;
  })
  bizAllData.push({"type":"门诊缴费","count":num});
  num = 0;
  inHospital.forEach(function (v, i) {
    num += v.count;
  })
  bizAllData.push({"type":"住院预交","count":num});
  getPieCount(bizAllData);
  set(
    bizData,
    'xAxis.data',
    register.map((v) => t(v.date))
  )
  set(
    bizData,
    'legend.data',
    ['挂号', '门诊缴费', '住院预交']
  )
  set(bizData, 'series', [
    {
      name: '挂号',
      type: 'line',
      smooth: true,
      // showSymbol: false,
      // areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      tooltip: {
        valueFormatter: function (value) {
          return value + ' 笔';
        }
      },
      data: register.map((v) => v.count)
    },
    {
      name: '门诊缴费',
      type: 'line',
      smooth: true,
      // showSymbol: false,
      // areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      tooltip: {
        valueFormatter: function (value) {
          return value + ' 笔';
        }
      },
      data: bill.map((v) => v.count)
    },
    {
      name: '住院预交',
      type: 'line',
      smooth: true,
      // showSymbol: false,
      // areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      tooltip: {
        valueFormatter: function (value) {
          return value + ' 笔';
        }
      },
      data: inHospital.map((v) => v.count)
    }
  ])
  bizShow.value = false
  loading.value = false
}


const payType = ref([])
const bizPieShow = ref(true)
const bizPieData = reactive<EChartsOption>(pie_biz) as EChartsOption
/** 查询订单数量趋势对照数据 */
const getPieCount = async (data) => {
  bizPieShow.value = true
  loading.value = true
  // 查询数据

  // set(bizData, 'title.text','业务统计')

  let payTypeData = []
  if (data && data[0]) {
    data.forEach(function (el, i) {
      payTypeData.push({value: el.count, name: el.type});
    })
  }
  payType.value = payTypeData;

  set(bizPieData, 'series', [
    {
      name: '业务类型',
      type: 'pie',
      radius: [30, 60],
      center: ['50%', '50%'],
      data: payTypeData,
      label: {
        formatter: '{b}: {@2012} 笔 ({d}%)'
      },
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ])

  bizPieShow.value = false
  loading.value = false
}

/** 初始化 **/
onMounted(() => {
  // handleTimeRangeTypeChange()
})
</script>

<style scoped>
:deep(.el-card__body) {
  padding: 5px 10px 10px 10px !important;
}

</style>
